<template>
	<view class="customer-info bgc-w p-30">
		<view class="fs-lg fw-6 fc-0 mb-20">
			客户信息
		</view>
		<view class="row-box pt-10 pb-10">
			<view class="avatar-info">
				<image class="avatar mr-20" src="/static/images/common/avatar.png" mode="scaleToFill"></image>
				<text class="user-name fc-0">用户昵称用户昵称用户昵称用户昵称用户昵称</text>
			</view>
			<view class="icon-info ml-20">
				<view class="iconfont fc-0 pt-20 pb-20 pl-30 " @click="makeCall">
					&#xe65f;
				</view>
				<view class="iconfont fc-0 pt-20 pb-20 pl-30 " @click="sendChat">
					&#xe631;
				</view>
			</view>
		</view>
		<view class="row-box pt-10 pb-10">
			<view class="">
				姓名
			</view>
			<view class="fc-0">
				姓名
			</view>
		</view>
		<view class="row-box pt-10 pb-10">
			<view class="">
				电话/手机
			</view>
			<view class="fc-0">
				183 0041 3090
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			makeCall() {
				this.makeCallFn({})
			},
			sendChat() {
				this.sendChatFn({})
			}
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.customer-info {
		.avatar-info {
			flex: 1;
			display: flex;
			align-items: center;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
				flex-shrink: 0;
			}

		}

		.icon-info {
			width: 120rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.iconfont {
				height: 100%;

			}
		}
	}
</style>